<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:ry="">
	<head>
		<th:block th:include="include :: header('授权角色')" />
		<th:block th:include="include :: layout-latest-css" />
		<th:block th:include="include :: ztree-css" />
	</head>
	<body class="gray-bg">
		<div class="ui-layout-west">
			<div class="box box-main">
				<div class="box-header">
					<div class="box-title">
						<div class="treeSearchInput" id="search" style="padding: 0px;">
							<label for="keyword">菜单：</label><input type="text" id="keyword" style="width: 180px;font-size: 12px;"/>
						</div>
					</div>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开"><i class="fa fa-chevron-up"></i> <font size="1">展开</font></button>
						<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠" style="display:none;"><i class="fa fa-chevron-down"></i> <font size="1">折叠</font></button>
						<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新菜单"><i class="fa fa-refresh"></i> <font size="1">刷新</font></button>
					</div>
				</div>
				<div class="ui-layout-content">
					<div id="menuTrees" class="ztree"></div>
				</div>
			</div>
		</div>

		<div class="ui-layout-center">
			<div class="container-div">
				<div class="row">
					<div class="col-sm-12 search-collapse" style="padding: 10px 10px 10px 30px;">
						<ul>
							<li>
								角色名称：<input type="text" id="role_name" name="role_name"/>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchTxt()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							</li>
						</ul>
					</div>
					<div class="col-sm-12 search-collapse" style="height: 250px;overflow: auto;">
						<div class="form-group">
	                        <div class="col-xs-10" id="roleDiv">
	                            <label th:each="role:${roles}" class="check-box">
									<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" />
								</label>
	                        </div>
	                    </div>
					</div>
				</div>
			</div>
		</div>

		<th:block th:include="include :: footer" />
		<th:block th:include="include :: layout-latest-js" />
		<th:block th:include="include :: ztree-js" />
		<script th:src="@{/js/jquery.textSearch-1.0.js}"></script>
		<script th:inline="javascript">
			var prefix = ctx + "system/menu";

			$(function() {
			    var panehHidden = false;
			    if ($(this).width() < 769) {
			        panehHidden = true;
			    }
			    $('body').layout({ initClosed: panehHidden, west__size: 250 });

			    initMenuTree();
			});

			//搜索功能
			function searchTxt(){
		    	var v = $("#role_name").val();
    			$("#roleDiv").textSearch(v);
		    }

	        function submitHandler() {
	            var menuIds = $.tree.getCheckedNodes();
		    	var roleIds = $.form.selectCheckeds("role_id");

		        if($.common.isEmpty(menuIds)) {
	        		$.modal.alertWarning('请至少选择一个菜单！');
	        		return;
	        	}

		        if($.common.isEmpty(roleIds)) {
	        		$.modal.alertWarning('请至少选择一个角色！');
	        		return;
	        	}

	        	var data = new Array();
	        	data.push({"name": "menuIds", "value": menuIds});
	        	data.push({"name": "roleIds", "value": roleIds});
		        $.operate.save(prefix + "/authRole", data);
		    }

		    function initMenuTree() {
		    	var url = prefix + "/menuTreeData";
				var options = {
					id: "menuTrees",
			        url: url,
			        check: { enable: true, nocheckInherit: true, chkboxType: { "Y": "", "N": "" } },
			        expandLevel: 0,
			        onCheck : function(event, treeId, treeNode) {
						loadRoles();
					}
			    };
				$.tree.init(options);
		    }

		    function loadRoles() {
		    	var menuIds = $("#menuIds").val();
		    	$.ajax({
     				url: prefix + "/loadRoles",
     				data: {
                       	"menuIds": function() {
                            return $.tree.getCheckedNodes();
                        }
                    },
        	        beforeSend: function () {
        	        	$.modal.loading("加载角色中，请稍后...");
        	        },
     				type: 'get',
     				dataType: 'html',
     				cache: false,
     				success: function (result) {
     					$("#roleDiv").html(result);
     					$.modal.closeLoading();
     				}
     			});
		    }

			$('#btnExpand').click(function() {
				$._tree.expandAll(true);
			    $(this).hide();
			    $('#btnCollapse').show();
			});

			$('#btnCollapse').click(function() {
				$._tree.expandAll(false);
			    $(this).hide();
			    $('#btnExpand').show();
			});

			$('#btnRefresh').click(function() {
				initMenuTree();
			});
		</script>
	</body>
</html>